<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<select id="selP"></select>
	<select id="selS"></select>
	<select id="selX"></select>

	<script src="a.js"></script>
	<script>
		var selP = document.getElementById('selP');
		var html = "";
		for(var i = 0;i<a.length;i++){
			html+="<option value='"+a[i].id+"'>"+a[i].name+"</option>"
		}
		selP.innerHTML = html;

		selP.onchange = function(){
			var val = this.value;
			var html2 = "";
			for(var i = 0;i<b.length;i++){
				if(b[i].parent == val){
					html2 += "<option value='"+b[i].id+"'>"+b[i].name+"</option>"
				}
			}
			selS.innerHTML = html2;
		}
		
		selS.onchange = function(){
			var val = this.value;
			var html2 = "";
			for(var i = 0;i<c.length;i++){
				if(c[i].parent == val){
					html2 += "<option value='"+c[i].id+"'>"+c[i].name+"</option>"
				}
			}
			selX.innerHTML = html2;
		}
	</script>
</body>
</html>